/*
# 自定义封装流布局 v2.0.2

# 流布局方向
    flex流布局存在两个方向；简称：流方向=方向1 ; 与相对方向=方向2

# 说明：横向、纵向、方向1、方向2
    举例：如果当前为横向流布局，那么相对方向就是 纵向
         如果当前为纵向流布局，那么相对方向就是 横向
    两个方向：流方向=方向1；相反方向=方向2；
    方向1：用 “justify-content” 控制
    方向2：用 “alien-item” 控制

# 命名规则 【fx方向1方向2】
# !important;为了提升优先级

# 全部class说明,请先理解 横向流 和 纵向流 、 方向1 和 方向2 ，要不然用起来会很疑惑
# 向下翻，有详细属性说明、向下翻，有详细属性说明、向下翻，有详细属性说明
  【fx】 开启流布局，默认横向布局
  【fx110】在流布局中，占据剩余全部空间
  【fxRow】开启横向流布局
  【fxCol】开启纵向流布局
  【fxWrap】开启自动换行
  【fxNpWrap】禁止自动换行
  【fxSta】横向流：左 ；纵向流：上
  【fxStaSta】横向流：左、上 ；纵向流：上、左
  【fxStaCen】横向流：左、居中 ；纵向流：上、居中
  【fxEnd】横向流：右 ；纵向流：下
  【fxEndEnd】横向流：右、下 ；纵向流：下、右
  【fxEndCen】横向流：右、居中 ；纵向流：居中、右
  【fxCen】横向流：居中 ；纵向流：居中
  【fxCenSta】横向流：居中、左 ；纵向流：居中、上
  【fxCenEnd】横向流：居中、右 ；纵向流：居中、下
  【fxCenCen】横向流：居中、居中 ；纵向流：居中、居中横向流：居中、居中 ；纵向流：居中、居中
  【fxBet】横向流：贴两端 ；纵向流：贴两端
  【fxBetSta】横向流：贴两端+剩余均分、上 ；纵向流：贴两端+剩余均分、左
  【fxBetEnd】横向流：贴两端+剩余均分、下 ；纵向流：贴两端+剩余均分、右
  【fxBetCen】横向流：贴两端+剩余均分、居中 ；纵向流：贴两端+剩余均分、居中
*/


/**
【justify-content】【控制方向1】【调整当前流的方向】
    【当前为水平流row时，方向1=从左到右】【当前为垂直流column时，方向1=从上到下】
    【flex-start】
        含义：flex项目向容器的起始位置对齐排列。在水平方向（主轴为水平时），所有项目都靠左对齐；在垂直方向（主轴为垂直时），所有项目都靠顶部对齐。
        场景：假设有一个导航栏，使用flex布局来排列导航项。如果希望导航项从左边开始依次排列，就可以使用flex-start。
    【flex-end】
        含义：flex项目向容器的结束位置对齐排列。在水平方向（主轴为水平时），所有项目都靠右对齐；在垂直方向（主轴为垂直时），所有项目都靠底部对齐。
        场景：比如在一个页面底部的版权信息区域，有多个版权相关的元素（如版权声明、年份、公司名称等），如果想让这些元素靠右对齐，可以使用flex - end。
    【center】
        含义：flex项目在容器的中心位置对齐排列。在水平方向（主轴为水平时），所有项目在水平中心对齐；在垂直方向（主轴为垂直时），所有项目在垂直中心对齐。
        场景：制作一个模态框，其中的内容（如标题、关闭按钮等）需要在模态框的水平中心位置显示，就可以对模态框内容区域的flex布局使用center属性。
    【space-between】
        含义：第一个flex项目靠容器的起始位置，最后一个flex项目靠容器的结束位置，其余项目均匀分布在它们之间，相邻项目之间的间距相等。
        场景：在一个产品展示区，有多个产品卡片，想让卡片在一行内均匀分布，且第一个卡片靠左，最后一个卡片靠右，就可以使用space - between。
    【space-around】
        含义：左右两侧都有相同大小的空白空间，相邻项目之间的空白是项目两侧空白的两倍。这使得项目看起来像是被等距地 “包围” 在空白空间中。
        场景：如果有一组图标，希望它们之间有一定的间隔，并且每个图标周围都有一些空白空间，space - around是一个不错的选择。
    【space-evenly】
        含义：所有flex项目（包括第一个项目之前和最后一个项目之后）之间的空白空间是完全相等的。这样所有项目在容器内均匀分布，空白空间分布更加对称。
        场景：在一个表单中，有多个输入框和按钮，想要它们均匀分布在一行，并且空白间隔完全相同，可以使用space - evenly。

【align-items】【控制方向2】【调整垂直于当前流的方向】
    【当前为水平流row时，方向2=从上到下】【当前为垂直流column时，方向2=从左到右】
    【start】
        含义：在主轴为水平方向时，flex项目靠顶部对齐；在主轴为垂直方向时，flex项目靠左侧对齐。
        场景：在一个侧边栏布局中，主轴是垂直方向，侧边栏中的菜单项（作为flex项目）可以使用flex - start来让它们在水平方向靠左侧对齐。
    【end】
        含义：在主轴为水平方向时，flex项目靠底部对齐；在主轴为垂直方向时，flex项目靠右侧对齐。
        场景：假设在一个页脚区域，有几个社交媒体图标（作为flex项目），主轴是水平方向，想要这些图标在垂直方向靠底部对齐，就可以使用flex - end。
    【center】
        含义：在主轴为水平方向时，flex项目在垂直方向的中心对齐；在主轴为垂直方向时，flex项目在水平方向的中心对齐。
        场景：比如在一个圆形的导航按钮组（主轴为水平方向）中，希望每个按钮在垂直方向上的中心对齐，就可以使用center。
    【baseline】
        含义：按照它们的基线（文本的基线）对齐。基线是字符底部所在的假想线，基线的位置可能不同。使得文本看起来像是在同一水平线上（在主轴为水平方向时）。
        场景：当有一组包含不同字体大小或者行高的文本标签作为flex项目，并且希望它们的文本基线对齐时，就可以使用baseline。例如在一个表单中，标签和输入框的组合，希望标签的文本基线对齐。
    【stretch】
        含义：如果flex项目没有设置高度（或者高度为auto），它们将沿着交叉轴（垂直于主轴的轴）被拉伸，以填充容器的高度（在主轴为水平方向时）或者宽度（在主轴为垂直方向时）。
        场景：假设有一个flex容器，主轴是水平方向。容器内有几个子元素，这些子元素没有设置明确的高度。当align - items设置为stretch时，这些子元素会自动拉伸其高度，以填满容器在垂直方向的空间。
 */
.fx {
    display: flex !important;
}

.fx1 {
    flex: 1 1 0 !important;
}

.fxRow {
    display: flex !important;
    flex-direction: row !important;
}

.fxCol {
    display: flex !important;
    flex-direction: column !important;
}

/*内容展示不下时，不会自动收缩*/
.fxShr0 {
    flex-shrink: 0;
}

.fxColCen {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.fxWrap {
    display: flex !important;
    flex-wrap: wrap !important;
}

.fxNpWrap {
    display: flex !important;
    flex-wrap: nowrap !important;
}

.fxSta {
    display: flex !important;
    justify-content: flex-start !important;
}

.fxStaSta {
    display: flex !important;
    justify-content: start !important;
    align-items: flex-start !important;
}

.fxStaCen {
    display: flex !important;
    justify-content: start !important;
    align-items: center !important;
}

.fxStaEnd {
    display: flex !important;
    justify-content: start !important;
    align-items: end !important;
}

.fxEnd {
    display: flex !important;
    justify-content: flex-end !important;
}

.fxEndCen {
    display: flex !important;
    justify-content: end !important;
    align-items: center !important;
}

.fxEndEnd {
    display: flex !important;
    justify-content: end !important;
    align-items: flex-end !important;
}

.fxCen {
    display: flex !important;
    justify-content: center !important;
}

.fxCenSta {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.fxCenEnd {
    display: flex !important;
    justify-content: center !important;
    align-items: end !important;
}

.fxCenCen {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/*这个属性值会使第一个子元素靠最左边，最后一个子元素靠最右边，中间的子元素均匀分布在它们之间*/
.fxBet {
    display: flex !important;
    justify-content: space-between !important;
}

.fxBetSta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: start !important;
}

.fxBetEnd {
    display: flex !important;
    justify-content: space-between !important;
    align-items: end !important;
}

.fxBetCen {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}


/*每个子元素的左右两侧都有相同大小的空白空间，并且相邻元素之间的空白是元素两侧空白的两倍*/
.fxAro {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}

.fxAroSta {
    display: flex !important;
    justify-content: space-around !important;
    align-items: start !important;
}

.fxAroEnd {
    display: flex !important;
    justify-content: space-around !important;
    align-items: end !important;
}

.fxAroCen {
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
}

/*所有子元素（包括第一个元素之前和最后一个元素之后）之间的空白空间是完全相等的*/
.fxEve {
    display: flex;
    justify-content: space-evenly !important;
    align-items: stretch !important;
}

.fxEveSta {
    display: flex;
    justify-content: space-evenly !important;
    align-items: flex-start !important;
}

.fxEveEnd {
    display: flex;
    justify-content: space-evenly !important;
    align-items: flex-end !important;
}

.fxEveCen {
    display: flex;
    justify-content: space-evenly !important;
    align-items: center !important;
}

/*内容拉伸铺满*/
.fxSthSth {
    display: flex !important;
    justify-content: stretch !important;
    align-items: stretch !important;
}
